import { createRouter, createWebHistory } from 'vue-router'
import setupGuards from './guards'
import Layout from '@/layout/index.vue'

const customComponent = {
    template: '<div>vue定义对象来创建组件</div>'
}

/**
 * 注意：子菜单仅在路由children长度>=1出现
 * hidden：如果设置为true，则项目不会显示在侧边栏中（默认为false）
 * alwaysShow：如果设置为true，将始终显示根菜单，如果未设置alwaysShow，当项目有多个子路由时，会变成嵌套模式，否则不显示根菜单
 * redirect：noRedirect如果设置noRedirect将不会在面包屑中重定向
 * name：'router-name'该名称由<keep-alive>使用（必须设置！！！）
 * meta：{
 * roles：['admin'，'Editor']控制页面角色（可以设置多个角色）
 * permissions: ['system:user:list', 'system:role:list'] 控制访问路由的菜单权限
 * title：侧边栏和面包屑中显示的名称
 * icon：侧边栏中显示的图标
 * noCache：如果设置为true，页面将不会被缓存（默认为false）
 * affix：如果设置为true，标签将附加在标签视图中
 * breadcrumb：如果设置为false，该项目将隐藏在breadcrumb中（默认为true）
 * activeMenu：'/example/list'如果设置路径，侧边栏会突出显示您设置的路径
 * }
 */

// 公共路由
export const constantRoutes = [
    {
        path: '/login',
        component: () => import('@/views/login.vue'),
        hidden: true
    },
    {
        path: '/redirect',
        component: Layout,
        hidden: true,
        children: [
            {
                path: '/redirect/:path(.*)',
                component: () => import('@/views/redirect/index.vue')
            }
        ]
    },
    {
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        children: [
            {
                path: 'dashboard',
                name: 'dashboard',
                component: () => import('@/views/dashboard/index.vue'),
                meta: {
                    title: 'route_mata_title.dashboard',
                    icon: 'clarity:dashboard-solid',
                    affix: true
                }
            }
        ]
    },
    {
        path: '/401',
        component: () => import('@/views/error-page/401.vue'),
        hidden: true
    }
]

// 动态路由，基于用户权限动态去加载
export const asyncRoutes = [
    {
        path: '/example',
        component: Layout,
        redirect: '/example/form',
        meta: {
            title: 'route_mata_title.example',
            icon: 'mynaui:letter-e-circle'
        },
        children: [
            {
                path: 'form',
                name: 'form',
                component: () => import('@/views/form/index.vue'),
                meta: {
                    title: 'route_mata_title.form',
                    icon: 'ant-design:form-outlined'
                }
            },
            {
                path: 'customComponent',
                name: 'customComponent',
                component: customComponent,
                meta: {
                    title: 'route_mata_title.custom_component',
                    icon: 'iconoir:component'
                }
            },
            {
                path: 'element-plus-demo',
                name: 'element-plus-demo',
                component: () => import('@/views/el-plus/index.vue'),
                meta: {
                    title: 'route_mata_title.el_plus_demo',
                    icon: 'ep:element-plus'
                }
            },
            {
                path: 'picture',
                name: 'picture',
                component: () => import('@/views/picture/index.vue'),
                meta: {
                    title: 'route_mata_title.picture',
                    icon: 'ep:picture-filled'
                }
            },
            {
                path: 'video',
                name: 'video',
                component: () => import('@/views/video/index.vue'),
                meta: {
                    title: 'route_mata_title.video',
                    icon: 'tabler:video'
                }
            }
        ]
    },
    {
        path: '/externalPage',
        component: Layout,
        redirect: '/externalPage/external-link-in',
        meta: {
            title: 'route_mata_title.externalPage',
            icon: 'octicon:link-external-16'
        },
        children: [
            {
                path: 'external-link-out',
                children: [
                    {
                        path: 'https://www.baidu.com',
                        meta: {
                            title: 'route_mata_title.external_link_out',
                            icon: 'hugeicons:link-backward'
                        }
                    }
                ]
            },
            {
                path: 'external-link-in',
                name: 'external-link-in',
                meta: {
                    title: 'route_mata_title.external_link_in',
                    icon: 'bi:link'
                },
                children: [
                    {
                        path: 'antdv-doc',
                        name: 'antdv-doc',
                        component: () => import('@/views/iframe/index.vue'),
                        meta: {
                            title: 'route_mata_title.antdv_doc',
                            icon: 'antdv',
                            href: 'https://www.antdv.com/docs/vue/introduce-cn'
                        }
                    },
                    {
                        path: 'element-plus-doc',
                        name: 'element-plus-doc',
                        component: () => import('@/views/iframe/index.vue'),
                        meta: {
                            title: 'route_mata_title.element_plus_doc',
                            icon: 'ep:element-plus',
                            href: 'https://cn.element-plus.org/zh-CN/'
                        }
                    }
                ]
            }
        ]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes: constantRoutes
})

// 应用守卫
setupGuards(router)

export default router
